<template>
  <div class="bg">
    <nav-com
      :title="$t('jiankangjiangjie')"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <div class="top-view1" v-if="haveshuju">
      <!-- echart -->
      <van-cell-group inset class="m-b-10 m-t-10 teshu">
        <van-cell inset >
          <van-row class="item-content" justify="space-between" align="center">
            <van-col span="12" class="qixingtitle-chart">{{ $t('mileages') }}</van-col>
          </van-row>
        </van-cell>
        <div class="group-item-chart">
          <chart-item :index="3" :chartdata="chartdata.data1.mileage.d1" :chartdataceshi="chartdata.data1.sleep.d1" :chartdatax='chartdata.data1.sleep.d2' :legend="chartdata.data1.txt"></chart-item>
        </div>
      </van-cell-group>
<!--      <van-cell-group inset class="m-b-10 m-t10 teshu">-->
<!--        <div class="group-item-chart" style="padding: 10px 10px 0">-->
<!--          <chart-item :index="4" :chartdata="chartdata.data2.mileage.d1" :chartdataceshi="chartdata.data2.hrv.d1"  :chartdatax='chartdata.data2.hrv.d2' :legend="chartdata.data2.txt"></chart-item>-->
<!--        </div>-->
<!--      </van-cell-group>-->
      <van-cell-group inset class="m-b-10 m-t-10 teshu">
        <van-cell inset >
          <van-row class="item-content" justify="space-between" align="center">
            <van-col span="12" class="qixingtitle-chart">{{ $t('shuimianfenshu') }}</van-col>
          </van-row>
        </van-cell>
        <div class="group-item-chart">
          <chart-item :index="0" :chartdata="chartdata.data3.sleep.d1" :chartdatax="chartdata.data3.sleep.d2"></chart-item>
        </div>
      </van-cell-group>
      <van-cell-group inset class="m-b-10 m-t-10 teshu">
        <van-cell inset >
          <van-row class="item-content" justify="space-between" align="center">
            <van-col span="12" class="qixingtitle-chart">{{ $t('hrvfenshu') }}</van-col>
          </van-row>
        </van-cell>
        <div class="group-item-chart">
          <chart-item :index="1" :chartdata="chartdata.data3.hrv.d1" :chartdatax="chartdata.data3.hrv.d2"></chart-item>
        </div>
      </van-cell-group>
    </div>
    <div class="top-view1" v-else>
      <div class="all-center">
        <img class="" :src="require('../../assets/management/qixing.png')" alt=""/>
        <div class="qixingtitle">
          <div class="subtitle">{{isanzhuo?$t('isnoliajieanzhuo'):$t('isnoliajieios')}}</div>
        </div>
      </div>
      <div  class='fatSubmit'>
        <van-button round type="info" class="fatSubmit_yanse" block @click="showchangejiankang=true">{{ $t('lianjie') }}</van-button>
      </div>
      <!--      弹框-->
      <van-dialog v-model="showchangejiankang" v-if="isanzhuo" :title="$t('linksjiankangtishi')" show-cancel-button @confirm="confirm" @cancel="cancel" :confirm-button-text="$t('yes')" :cancel-button-text="$t('no')">
      </van-dialog>
      <van-dialog v-model="showchangejiankang" v-if="!isanzhuo" :title="$t('ioslinkjiankangstishi')" show-cancel-button @confirm="confirm" @cancel="cancel" :confirm-button-text="$t('yes')" :cancel-button-text="$t('no')">
      </van-dialog>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
import navCom from '@/components/nav-com.vue'
import chartItem from '@/components/chart.vue'
import {
  returnData
} from '@/utils/day.js'
import { drivceHealthData } from '../../api/deviceManagement'
export default {
  name: 'bonusList',
  components: {
    navCom,
    chartItem
  },
  data () {
    return {
      showchangejiankang: false,
      isanzhuo: true,
      haveshuju: false,
      chartdata: {},
      date: returnData(new Date()),
      showrili: false,
      active: 0,
      searchValue: '',
      checked: true,
      showView: true,
      title: '骑行日历',
      showPage: true,
      lichengValue: '',
      swiperData: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg'
      ]
    }
  },
  mounted () {
    const nav = navigator.userAgent
    if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
      this.isanzhuo = true
    } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
      this.isanzhuo = false
    }
    this.init()
  },
  methods: {
    clickCurrentDay (date) {
      console.log('========date', date)
      this.date = date.data
      this.showrili = false
    },
    jumpTo (url) {
      this.$router.push(url)
    },
    confirm () {
      const nav = navigator.userAgent
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.getHealthServe()
      } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('getHealthServe', {}, res => {})
      }
    },
    cancel () {
      this.showchangejiankang = false
    },
    // 返回
    backHandler () {
      const nav = navigator.userAgent
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.onBackPress()
      } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('onBackPress', {}, res => {})
      } else {
        this.$router.go(-1)
      }
    },
    clearHistory () {
      this.$toast('清理缓存成功')
    },
    // 初始化
    init () {
      drivceHealthData().then((res) => {
        if (res.code == 1) {
          this.chartdata = res.data
          if( res.data.status == '0'){
            this.haveshuju = false
          }else{
            this.haveshuju = true
          }
        }
      })

      // const nav = navigator.userAgent
      // if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
      //   let res = phone.getHealthServe()
      //   let datas = JSON.parse(res)
      //   if (datas.openHealth) {
      //     this.haveshuju = true
      //     drivceHealthData().then((res) => {
      //       if (res.code == 1) {
      //         this.chartdata = res.data
      //       }
      //     })
      //   } else {
      //     this.haveshuju = false
      //   }
      // } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
      //   this.$bridge.callhandler('getHealthServe', {}, res => {
      //     let datas = res
      //     if (datas.openHealth) {
      //       this.haveshuju = true
      //       drivceHealthData().then((res) => {
      //         if (res.code == 1) {
      //           this.chartdata = res.data
      //         }
      //       })
      //     } else {
      //       this.haveshuju = false
      //     }
      //   })
      // }
    },
    onSearch () {

    }
  }
}
</script>
<style lang="scss" scoped>
.top-view1{
  margin-top: 26.23vw;
  .all-center{
    margin: 10vh auto 5vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
    img{
      width:22%;
      margin: 10vh auto 5vh;
    }
    .qixingtitle{
      margin-top: 20px;
      font-weight: 400;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 100%;
      .subtitle{

      }
      .smalltitle{
        margin-top: 10px;
      }
    }
  }
}
.m-t-16{
  margin-top: 13.33vw;
}
.bg{
  background: #F8F8F8;
}
.m-b-10{
  margin-bottom: 10px;
}
.m-t-10{
  margin-top: 10px;
}
.van-cell__title, .van-cell__value {
  flex: 1;
  display: flex;
  align-items: center;
}
.teshu{
}
.search_btn{
  width: 56px;
  background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.van-search__action{
  padding: 0;
}
.van-search{
  padding: 0;
}
.top-title{
  color: #fff;
  .title{
    padding: 0rem 0rem 0px 0.42667rem;
    font-size: 22px;
    font-family:PingFang, PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
  }
  .sub-title{
    padding: 0rem 0rem 0px 0.42667rem;
    font-size: 16px;
    font-family:PingFang, PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    margin-top: 10px;
  }
  .right-img{
    width: 135px;
  }
}
.wenti{
  font-size: 22px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #303030;
  margin: 0px 0.42667rem;
  border-bottom: 0.02667rem solid #ebedf0;
  padding: 10px 0 15px;
}
.group-item{
  display: flex;
  flex-direction: column;
  padding:0 15px 15px;
  .group-item-top{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 10px;
    &:first-child{
      padding: 10px 0;
    }
    .group-item-left{
      display: flex;
      align-items: center;
      div{
        display: flex;
        align-items: center;
      }
      img{
        width: 15px;
        margin-right: 10px;
      }
      .management_name{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #303030;
      }
    }
    .group-item-right{
      display: flex;
      justify-content: flex-start;
      width: 77%;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #303030;
    }
    .group-item-right-time{
      width: 70%;
    }
  }
  .group-item-content{
    border-top: 0.02667rem solid #ebedf0;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .group-item-content-flex{
      display: flex;
      align-items: center;
      .icon-small{
        width: 15px;
        margin-right: 4px;
      }
      div{
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #808080;
      }
    }
    .group-item-content-right{
      text-align: right;
    }
  }
  .group-item-content-teshu{
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .group-item-content-flex{
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      div{
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
      }
      .group-item-content-flex-shuliang{
        padding-top: 5px;
        display: flex;
        align-items: center;
        .icon-small{
          width: 15px;
          margin-right: 4px;
        }
        div{
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #808080;
          display:flex;
          height: 15px;
          align-items: center;
        }
      }
    }
    .group-item-content-right{
      text-align: right;
    }
  }
}
.group-item-chart{
  height: 215px;
}
.item-content{
  width: 100%;
  display: flex;
  align-items: center;
}
.van-search__content {
  background-color: #EEEEEE;
}
::v-deep .van-tabs__nav{
  border-bottom: 1px solid #fafafa!important;
  border-top: 1px solid #fafafa!important;
}
::v-deep .van-tabs__line {
  bottom: 0.6rem;
}
::v-deep .van-tabs--line .van-tabs__wrap {
  height: 1.333rem;
}
.qixingtitle{
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #303030;
}
.qixingtitle-chart{
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #303030;
}
.qixingtitle-chart-right{
  text-align: right;
}
.qixingtitlerili{
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 500;
  color: #303030;
  display: flex;
  align-items: center;
  height: 100%;
}
.closed-icon{
  position: fixed;
  bottom: 3rem;
  left: 45%;
  z-index: 5001;
}
::v-deep .van-tab{
  font-size: 16px;
}
.fatSubmit{
  padding: 0.3rem 0rem 10px;
  margin: 0 0.42667rem;
  display: flex;
  justify-content: center;
  align-items: center;
  .fatSubmit_yanse{
    width: 50%;
    border: 0px!important;
    background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
    box-shadow: 0px 2px 4px 0px rgba(10,211,159,0.3);
    font-size: 18px!important;
    font-weight: 600;
  }

}
</style>
